<template>
  <div id="login">
    <video
      data-v-73443695=""
      muted="muted"
      src="http://chst.vip:8081/crm/media/bg-video.d2d602a9.mp4"
      loop="loop"
      autoplay="autoplay"
      class="video"
    ></video>
    <!-- <div class="bgImage"></div> -->
    <div class="login-loginRuleForm">
      <h1 class="text_title">{{pagesInfo.title}}</h1>
      <!-- vue3的动态组件  通过 comnent:is="pagesInfo" -->
      <!-- 常规登入组件 -->
      <commonLogin v-show="pagesInfo['isCommon']" @backIphone="handleClickIphone"/>
      <!-- 短信登入 -->
      <cellipone v-show="!pagesInfo['isCommon']" @backComponent="handleClickComponent"/>
    </div>
  </div>
</template>
<script setup>
import commonLogin from "./commonLogin.vue";
import cellipone from "./cellipone.vue";
import { ref } from "vue";
let pagesInfo = ref({
   title: "后台管理系统",
   isCommon: true
});
//markRaw()将动态组件响应切换成不响应
//定义切换逻辑
let isCommonChange=(input)=>{
  pagesInfo.value['isCommon'] = !pagesInfo.value['isCommon'];
      if(input ==="celliphone"){
        pagesInfo.value['title'] = "后台管理系统";
      }else if(input === "commonLogin"){
        pagesInfo.value['title'] = "手机登入";
      }
}

let handleClickIphone =(input)=>{
     isCommonChange(input);
};
let handleClickComponent =(input)=>{
     isCommonChange(input);
}
</script>
<style scoped lang="scss">
//修改一个类名的情况就是对类名进行限制
#login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .text_title {
    color: #fff;
    text-align: center;
    font-family: "楷体";
    font-size:50px
  }
  .bgImage {
    background-image: url(@/assets/img/bg2.png);
    background-repeat: no-repeat;
    position: fixed;
    width: 20%;
    height: 40%;
    background-size: 100% 100%;
    left: 20%;
    top: 40%;
    opacity: 0.5;
  }
  .text_title {
    margin-bottom: 30px;
  }
  .login-loginRuleForm {
    position: relative;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 50px 50px;
  }
  :deep(.el-form-item__label) {
    color: #fff;
  }
}

.video {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -999;
}
</style>